<template>
  <!-- 用户详情 -->
  <div id="userDetails">
    <van-nav-bar :title="userProfile.nickname"
                 @click-left="$router.go(-1)"
                 fixed
                 style="z-index: 9999">
      <template #left>
        <van-icon size="18"
                  name="arrow-left"
                  color="#000" />
      </template>
      <template #right>
        <van-icon style="transform: rotate(90deg)"
                  size="18"
                  name="ellipsis"
                  color="#000" />
      </template>
    </van-nav-bar>
    <header style="margin-top: 46px">
      <van-row>
        <van-col span="8">
          <div style="margin: 10px 0 0 35px">
            <van-image width="60"
                       height="60"
                       round
                       :src="userProfile.avatarUrl" />
          </div>
          <div class="simple">
            <p style="margin: 0">{{ userProfile.signature }}</p>
          </div>
        </van-col>
        <van-col span="16">
          <van-cell class="user">
            <template #title>
              <van-grid :border="false"
                        :column-num="3">
                <van-grid-item text="粉丝"
                               @click="handleFans">
                  <template #icon>
                    {{ userProfile.followeds }}
                  </template>
                </van-grid-item>
                <van-grid-item text="关注">
                  <template #icon>
                    {{ userProfile.follows }}
                  </template>
                </van-grid-item>
                <van-grid-item text="等级">
                  <template #icon> Lv.{{ userData.level }} </template>
                </van-grid-item>
              </van-grid>
            </template>
            <template #label>
              <van-button round
                          block
                          type="default">编辑信息</van-button>
            </template>
          </van-cell>
        </van-col>
      </van-row>
    </header>
    <van-tabs v-model="active"
              @click="handleTabClick">
      <van-tab title="主页">
        <HomePage ref="HomePage"
                  :userProfile="userProfile"
                  :userData="userData" />
      </van-tab>
      <van-tab title="动态">
        <Dynamic ref="Dynamic" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getUserDetalis } from '@/api/userInfo'
import { releaseTime } from '../../../currency'
import HomePage from './userDetails/HomePage'
import Dynamic from './userDetails/dynamic'
export default {
  name: 'userDetails',
  data() {
    return {
      userProfile: {},
      userData: {},
      active: 0,
      userId: '',
    }
  },
  components: { HomePage, Dynamic },
  filters: {
    eventTime(value) {
      return releaseTime(value)
    },
  },
  methods: {
    // 获取粉丝
    handleFans() {},
    handleTabClick(index) {
      if (index == 1) {
        setTimeout(() => {
          this.$refs.Dynamic.userId = this.userId
          this.$refs.Dynamic.initData()
        }, 0)
      }
    },
    userInit(id) {
      this.userId = id
      setTimeout(() => {
        this.$refs.HomePage.userId = id
        this.$refs.HomePage.getUserInfo()
      }, 10)
      getUserDetalis(id).then((res) => {
        this.userData = res
        this.userProfile = res.profile
      })
    },
  },
  created() {
    this.userInit(this.$route.query.id)
  },
}
</script>

<style scoped>
#userDetails {
  width: 100%;
  height: 100%;
  background: #f6f6f6;
}
#userDetails header {
  background: #fff;
  width: 95%;
  border-radius: 12px;
  margin: 10px auto;
  /* padding: 10px 0; */
}
#userDetails [class*='van-hairline']::after {
  border: none;
  background: #f6f6f6;
  color: #000;
}
.simple {
  font-size: 12px;
  text-align: center;
}
#userDetails /deep/ .van-grid-item__content {
  padding: 0;
}
.van-button {
  height: 35px;
}
#userDetails .van-card__thumb {
  width: 50px;
  height: 50px;
}
#userDetails /deep/ .van-card__thumb img {
  width: 50px;
  /* height: 50px; */
  border-radius: 50%;
}
#userDetails /deep/ .van-card__price {
  width: 100%;
}
#userDetails .songIcon {
  padding-right: 10px;
}
#userDetails .songIcon /deep/ .van-image__error,
#userDetails .songIcon /deep/ .van-image__img,
#userDetails .songIcon /deep/ .van-image__loading {
  border-radius: 7px;
}
.msg {
  position: absolute;
  top: 50%;
  font-size: 14px;
}
.arUser {
  color: #a1b5cb;
}
.commentContent {
  width: 80%;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 14px;
  padding: 10px 7px;
  font-size: 12.5px;
}
.songInfo .van-cell {
  padding: 10px 0;
}
.songInfo /deep/ .van-image__error,
.songInfo /deep/ .van-image__img,
.songInfo /deep/ .van-image__loading {
  border-radius: 4px;
}
#userDetails .van-tabs__nav {
  background: #f6f6f6;
}
#userDetails .van-card {
  width: 95%;
  margin: 10px auto;
  background: #fff;
  border-radius: 14px;
}
#userDetails /deep/ .van-nav-bar__content {
  z-index: 99999;
}
</style>